<template>
  <div>
    <div style="margin: 0 auto; width: 40px; height: 40px; padding-top: 50px">
      <img src="../img/icon.png" alt="" width="100%" height="100%" />
    </div>

    <div
      style="
        width: 334px;
        height: 473px;
        border-radius: 30px;
        background-color: white;
        margin: 30px auto;
      "
    >
      <ul>
        <li>
          <h4 style="display: flex; justify-content: center; padding-top: 30px">
            验证手机号
          </h4>
        </li>
        <li>
          <van-cell-group inset>
            <p>手机号</p>
            <van-field
              v-model="phone"
              center
              clearable
              placeholder="请输入手机号"
              type="digit"
              style="border: 1px solid #ccc"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  :disabled="countdown > 0"
                  @click="Yzm"
                  >{{
                    countdown > 0 ? `重新发送(${countdown})` : "发送验证码"
                  }}</van-button
                >
              </template>
            </van-field>
            <van-field
              v-model="phoneYz"
              center
              clearable
              placeholder="请输入短信验证码"
              type="digit"
              style="border: 1px solid #ccc"
            >
            </van-field>
          </van-cell-group>
        </li>

        <li>
          <van-form @submit="onSubmit" style="margin-top: 50px">
            <van-cell-group inset>
              <!-- 电子邮件格式认证 -->
              <van-field
                v-model="username"
                name="username"
                label="Email"
                placeholder="输入电子邮箱"
                style="margin-bottom: 10%; border: 1px solid #ccc"
                :rules="[
                  {
                    required: true,
                    message: '请填写Email',
                  },
                  {
                    pattern:
                      /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    message: '请输入正确的邮箱格式',
                  },
                ]"
              />

              <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
                style="border: 1px solid #ccc"
              />
            </van-cell-group>
            <div
              style="
                margin: 16px;
                display: flex;
                justify-content: space-between;
              "
            >
              <div></div>
              <van-button
                round
                type="primary"
                native-type="submit"
                style="width: 145px; height: 48px"
                @click="next"
              >
                下一步
              </van-button>
            </div>
          </van-form>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>

import { ref, onMounted } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import { useRouter } from "vue-router";
let code;
const router = useRouter();

const username = ref("");
const password = ref("");
const phone = ref("");
const countdown = ref(0);
const phoneYz = ref("");

const Yzm = () => {
  // 通过正则判断手机号格式是否正确
  let reg = /^1[3456789]\d{9}$/;
  if (reg.test(phone.value)) {
    // 发送验证码
    //生成四位数的验证码
    code = Math.floor(Math.random() * 9000) + 1000;
    console.log(code);
    showSuccessToast("验证码已发送");
    // 开始倒计时
    countdown.value = 30;
    let interval = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--;
      } else {
        clearInterval(interval);
      }
    }, 1000);
  } else {
    showFailToast("格式不正确");
  }
};

onMounted(() => {
  // 初始化时检查是否需要开始倒计时
  if (countdown.value > 0) {
    let interval = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--;
      } else {
        clearInterval(interval);
      }
    }, 1000);
  }
});
const onSubmit = (values) => {
  console.log("submit", values);

  //存入本地存储 用户名和密码
  localStorage.setItem("username", values.username);
  localStorage.setItem("password", values.password);
};
const next = () => {
  //判断验证码是否正确
  if (phoneYz.value == code) {
    showSuccessToast("验证成功");
    
    //跳转到主页
    router.push("/about");
    //保存本页内容
  } else {
    showFailToast("验证码错误");
  }
};
</script>

<style lang="scss" scoped></style>
